import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, message } from 'antd';
import styles from './index.less';

// import { request } from '@umijs/max';
import { loginApi } from '@/services/user';

import { useDebounceFn } from 'ahooks';

import { useNavigate } from '@umijs/max';

const Login = () => {
  // labelCol和wrapperCol用来控制label和表单控件的长度比例的
  // const col = {
  //   labelCol: { span: 8 },
  //   wrapperCol: { span: 16 },
  // };

  // 使用Form组件下面的useForm方法获取到form实例
  const [form] = Form.useForm();
  const navigate = useNavigate();

  // const [initData, setInitData] = useState({ username: 'tom' });
  // const [disabled, setDisabled] = useState(false);

  const { run } = useDebounceFn(
    async (values: any) => {
      // console.log('Received values of form: ', values);
      const res = await loginApi(values);
      console.log(res, 11111);
      if (res) {
        message.success('登录成功');
        localStorage.setItem('token', res.data.token);
        navigate('/home');
      }
    },
    {
      wait: 500,
    },
  );

  const login = () => {
    // getFieldsValue方法用于获取所有的表单数据
    // console.log(form.getFieldsValue());

    // getFieldValue方法用于某一个字段数据
    // console.log(form.getFieldValue('username'));

    // isFieldsTouched表示里面的表单控件是否被用户操作过
    // console.log(form.isFieldsTouched(true));

    // resetFields重置表单控件
    // form.resetFields();

    // form表单的值是不能通过setState来修改的，只能用setFieldsValue
    // setInitData({ username: 'jerry' });
    // form.setFieldsValue({ username: 'jerry' });

    // submit方法用于做表单提交
    form.submit();

    // form
    //   .validateFields()
    //   .then((values) => {
    //     console.log(values);
    //   })
    //   .catch((errorInfo) => {
    //     console.log(errorInfo);
    //   });
  };

  return (
    <div className={styles.loginWrap}>
      <h2>嗨购后台管理系统</h2>
      <Form
        form={form}
        name="normal_login"
        className="login-form"
        // {...col}
        // initialValues表示表单的初始值
        // initialValues={{ username: 'tom' }}
        // onFinish是当form里面的submit按钮点击时触发
        onFinish={run}
      >
        <Form.Item
          // 如果加label，需要加在Item组件上，只要有required: true，自动就有红色的必填星号
          // label="用户名"
          // name属性就是最后的对象的key
          name="adminname"
          // 校验规则
          rules={[
            { required: true, message: 'Please input your Username!' },
            // { max: 5, message: '太长了' },
          ]}
        >
          <Input
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="Username"
          />
        </Form.Item>
        <Form.Item
          // label="密码"
          name="password"
          rules={[{ required: true, message: 'Please input your Password!' }]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>

        {/* <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            style={{ width: '100%' }}
          >
            Log in
          </Button>
        </Form.Item> */}
      </Form>

      <Button type="primary" style={{ width: '100%' }} onClick={login}>
        登录
      </Button>
    </div>
  );
};

export default Login;
